<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader />
    <el-divider content-position="center">文章归档</el-divider>
    <el-container>
      <el-aside width="200px"> </el-aside>
      <el-main>
        <div class="total">
          当前文章总数：<span class="count">{{ info.count }}</span>
        </div>
        <br /><br />
        <div
          v-for="article in info.results"
          v-bind:key="article.url"
          id="articles"
        >
          <div class="block">
            <el-timeline>
              <el-timeline-item timestamp="更新" placement="top">
                <el-card shadow="hover">
                  <h4>
                    <router-link
                      :to="{
                        name: 'ArticleDetail',
                        params: { id: article.id },
                      }"
                      class="article-title"
                    >
                      {{ article.title }}
                    </router-link>
                  </h4>
                  <p>
                    由{{ article.author.username }} 发布于
                    {{ formatted_time(article.created) }}
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-main>
      <el-aside width="200px"></el-aside>
    </el-container>
    <div id="paginator">
      <span v-if="is_page_exists('previous')">
        <router-link :to="get_path('previous')" @click="refresh" class="page">
          pre
        </router-link>
      </span>
      <span class="current-page">
        {{ get_page_param("current") }}
      </span>
      <span v-if="is_page_exists('next')">
        <router-link :to="get_path('next')" @click="refresh" class="page">
          next
        </router-link>
      </span>
    </div>
    <BlogFooter />
  </div>
</template>

<script>
import BlogHeader from "@/components/BlogHeader.vue";
import BlogFooter from "@/components/BlogFooter.vue";
import { ref } from "vue";
import { useRoute } from "vue-router";
import pagination from "@/composables/pagination.js";
import getArticleData from "@/composables/getArticleData.js";
import formattedTime from "@/composables/formattedTime.js";

export default {
  name: "TimeLine",
  components: { BlogHeader, BlogFooter },

  setup() {
    const info = ref("");
    // 创建路由
    const route = useRoute();
    const kwargs = ref({ page: 0, searchText: "" });
    getArticleData(info, route, kwargs);
    const { is_page_exists, get_page_param, get_path } = pagination(
      info,
      route
    );
    const formatted_time = formattedTime;

    return {
      info,
      is_page_exists,
      get_page_param,
      get_path,
      formatted_time,
    };
  },
  methods: {
    refresh: function() {
      this.$router.go(0);
    },
  },
};
</script>

<style scoped>
.article-title {
  color: black;
  text-decoration: none;
  padding: 5px 0 5px 0;
}
.article-title:hover {
  color: grey;
}
p {
  font-family: "Verdana";
  color: grey;
}
#paginator {
  text-align: center;
  padding-top: 50px;
  font-family: "Verdana";
}
.current-page {
  font-family: "Verdana";
  padding-left: 10px;
  padding-right: 10px;
}
.page {
  text-decoration: none;
  color: black;
}
.page:hover {
  color: lightskyblue;
}
.total {
  text-align: center;
  color: grey;
}
.count {
  color: black;
}
</style>
